<template>
	<view class="conpage">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="库存" rightIcon="search" @clickLeft="back" @clickRight="goRight"/>
		<view class="title">
			<text>{{sysInfo.buildingName}}</text>
			<text style="margin: 0 8px;">—</text>
			<text>{{sysInfo.labName}}</text>
		</view>
		<view class="cabAll" @touchmove.stop>
			<view @click="tabClick(item)" v-for="(item,index) in tabList" :class="tabId == item.tabId ? 'cabClick': 'cab'">
				<view class="cabTop">
					<image class="cabImg" src="../../static/image/cab.png" mode=""></image>
					<view class="cabText">{{item.fdictname}}</view>
				</view>
				<view v-if="tabId == item.fdictno" :style="{'width': '100%','height': '4px','borderRadius': '2px','backgroundColor': item.fdictmemo,'marginTop': '2px'}"></view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll-content" :style="{'height': allheight,'overflow-y': 'auto','marginTop': '0px'}" >
			<view class="tableshadow" v-for="(e,index) in dataList" style="width: 100%;">
				<view class="dateSty">{{e.date}}</view>
				<scroll-view scroll-x class="scroll-content scroll" @touchmove.stop>
					<uni-table style="margin-top: 4px" emptyText="暂无更多数据">
							<!-- 表格数据行 -->
							<uni-tr class="tableHead" v-for="(item,index) in dataListName" :key="'dataListName'+index">
								<uni-td>
									<span>{{item.demo1}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo2}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo3}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo4}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo5}}</span>	
								</uni-td>
							</uni-tr>
							<uni-tr v-for="(item,index) in e.list" :key="index">
								<uni-td>
									<span>{{item.fgoodname}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fequipmenttag}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.validday}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.f5}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fstate}}</span>	
								</uni-td>
							</uni-tr>
					</uni-table>
				</scroll-view>
			</view>	
			<view v-if="dataList.length == 0" style="font-size: 18px;color: #113A62;opacity: 0.65;width: 100%;text-align: center;padding-top: 50px;">
				暂无数据
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import moment from '../../utils/moment.min.js'
	var that;
	export default {
		data() {
			return {
				allHeight: 0,
				sysInfo: null, // 系统变量
				tabList:[], // 储物柜按钮
				tabId: null, // 储物柜所点击按钮id
				dataListName: [] ,// 物料列表头 
				dataList: [] ,// 物料列表
			}
		},
		onLoad(e) {
			that = this
			that.sysInfo = this.$sys.getSysInfo();
			uni.getSystemInfo({
			    success: function (res) {
					that.allheight = (res.windowHeight - 189) + 'px'
				}
			});
			that.getTab()
		},
		methods: {
			// 物料列表
			getList(fdictno){
				that.dataListName = [
					{demo1:'化学品名',demo2:'仓号',demo3:'有效期',demo4:'库存量',demo5:'状态'},
				]
				that.$http.get('material/warehouseInv/getWarehouseInvList', {
					fsiteNo: that.sysInfo.fsiteNo,
					fpointNo: that.sysInfo.labNo,
					fdictno: fdictno
				}).then(e => {
					console.log('e222',e)
					that.dataList = e.list
				}).catch(()=>{
					that.dataList = []
				})
			},
			// 储物柜列表
			getTab(){
				// 储物柜列表
				that.$http.get('material/tsCabinet/getFstorageflagList', {
					fpointNo: that.sysInfo.labNo,
				}).then(e => {
					console.log('e111',e)
					that.tabList = e.list
					that.getList(e.list[0].fdictno)
					that.tabId = e.list[0].fdictno
				}).catch(()=>{
					that.tabList = []
				})
			},
			// 储物柜点击
			tabClick(item){
				that.tabId = item.fdictno
				that.getList(item.fdictno)
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			goRight(){
				that.$util.pageTo('index/inventorySearch')
			}
		}
	}
</script>

<style>
	.dateSty{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		height: 30px;
		line-height: 30px;
		color: #113A62;
		opacity: 0.65;
		margin-left: 12px;
	}
	.title{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		/* identical to box height, or 150% */
		color: #113A62;
		width: 100%;
		text-align: center;
		padding-top: 3px;
	}
	.cabAll{
		width: 100%;
		height: 85px;
		display: flex;
		align-items: center;
		overflow-x: auto;
	}
	.cabClick{
		background: #E3EDF7;
		/* Card Pressed */
		box-shadow: inset -4px -4px 9px rgba(255, 255, 255, 0.6), inset 4px 4px 14px #C5D7EE;
		border-radius: 21px;
		height: 26px;
		padding: 8px 16px;
		margin-left: 16px;
		white-space: nowrap
	}
	.cab:last-child{
		margin-right: 16px;
	}
	.cabClick:last-child{
		margin-right: 16px;
	}
	.cabTop{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.cab{
		background: #E3EDF7;
		/* Card Float */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 21px;
		height: 26px;
		padding: 8px 16px;
		margin-left: 16px;
		white-space: nowrap
	}
	.cabImg{
		max-width: 12px;
		max-height: 16px;
		box-shadow: inset 0px 1px 1px #5A6571;
		margin-right: 10px;
	}
	
	.cabText{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 26px;
		/* identical to box height, or 144% */
		color: #113A62;
		opacity: 0.7;
	}
	
	.scroll {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}
		.scroll-box {
			padding: 24rpx;
			display: inline-block;
			width: 300rpx;
			height: 172rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			box-shadow: 0px 0px 4rpx 0px #ACACAC;
			border-radius: 8rpx;
			border: 1rpx solid #ACACAC;
		}
	
		.scroll-box:last-child {
			margin-right: 0;
		}
</style>
